<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>
<script>
    // 回调地狱：回调函数嵌套
    // 回调函数的嵌套：当多个异步操作继发（一个执行完毕之后才能继续执行下一个）执行时，回调函数嵌套

    // 产生回调地狱的场景：
    // 1.多个异步操作，继发执行，
    // 2.并且需要拿到上一个异步操作的结果数据才能执行下一个异步操作
    // 回调地狱：
    // setTimeout(() => {
    //     console.log(1);
    //     setTimeout(() => {
    //         console.log(2);
    //         setTimeout(() => {
    //             console.log(3);

    //         }, 1000)
    //     }, 1000)
    // })

    // 解决回调地狱的方案： 方案一：Promise的链式调用

    // new Promise((resolve, reject) => {
    //     // 模拟第一个异步操作
    //     setTimeout(() => {
    //         // 将第一个异步操作的结果 保存到 Promise对象中
    //         resolve(1)
    //     })
    // }).then(res => {
    //     // 输出第一个异步操作的结果
    //     console.log(res);
    //     // 把装有第二个异步操作的结果的Promise对象返回
    //     // 返回的Promise对象的状态与结果做了then 方法中返回的Promise对象的状态与结果
    //     return new Promise((resolve, reject) => {
    //         // 模拟第二个异步操作
    //         setTimeout(() => {
    //             // 将第二个异步操作的结果保存到Promise对象中
    //             reject(2)
    //         }, 1000)
    //     })
    // }).then(res => {
    //     // 输出第二个异步操作的结果
    //     console.log(res);
    //     return new Promise((resolve, reject) => {
    //         setTimeout(() => {
    //             resolve(3)
    //         }, 1000)
    //     })
    // }).then(res => {
    //     // 输出第三个异步操作的结果
    //     console.log(res);
    // }).catch(err => {
    //     console.log('捕获到异常：', err);
    // })

    // 异常穿透： 在 Promise 链式调用中，如果中间的 then 没有写错误处理（第二个回调或 catch），异常会自动向下传递，直到被链条中最近的 catch 捕获。

    // 方案二：async/await

    async function fn() {

        try {
            const res1 = await new Promise((resolve, reject) => {
                setTimeout(() => {
                    resolve(1)
                })
            })
            console.log(res1);
            const res2 = await new Promise((resolve, reject) => {
                setTimeout(() => {
                    reject(2)
                }, 1000)
            })
            console.log(res2);
            const res3 = await new Promise((resolve, reject) => {
                setTimeout(() => {
                    resolve(3)
                }, 1000)
            })
            console.log(res3);
        } catch (err) {
            console.log('捕获到异常：', err);
        }

    }

    fn()


</script>

</html>